<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0, minimal-ui">
    <title>线路实时监测</title>
    <link rel="stylesheet" href="${s.base}/res/mobile/style/dodem.css"/>
    <!-- jquery 导致  a标签 href 锚点 不起作用 -->
    <script src="${s.base}/res/mobile/js/zepto.min.js"></script>
      <script src="${s.base}/res/mobile/js/zepto.touch.js"></script>
      
    <link rel="stylesheet" href="${s.base}/res/mobile/css/swiper.min.css">
          
     <!-- 图标字体库 -->
    <link rel="stylesheet" href="${s.base}/res/iconfont/font-awesome.min.css">
    <!-- 天气图标 -->
    <link rel="stylesheet" href="${s.base}/res/css/weather.css"> 
    <!--  link rel="stylesheet" href="${s.base}/res/mobile/css/swiper.min.css"-->
    
    <link rel="stylesheet" href="${s.base}/res/mobile/style/weui.min.css"> 

 
     <!-- 动态加载图片 -->
	<script src="${s.base}/res/js/lazyLoadPic.js"></script>
	<!-- 自定义函数 -->
	<script src="${s.base}/res/mobile/js/dodem.js"></script>
 
	<script type="text/javascript" src="${s.base}/res/js/provinceid.js"></script> 
    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 

	<style type="text/css">
	#timeSelect{
	    position: absolute;
		width: 100px;
		height: 30px;
		top: 3px;
		right: 5px;
		background: rgba(39, 97, 65, 0.9);;
		border: 1px solid #999;
		border-radius: 5px;
		box-shadow: 1px 1px 1px #000;
	}
	#timeBtn{
	 
		display: block;
		position: relative;
		top: 0px;
		right: 0px;
		text-align: center;
		line-height: 30px;
		width: 100%;
	}
	#appDateTime{
		    position: absolute;
		    top: 0;
		    /* left: 0; */
		    right: 0px;
		    float: right;
		    background: none;
		    border: none;
		    color: rgba(0,0,0,0);
		    width: 35px;
		    height: 35px;
	}
	
	   #small_area_more,.err_text{
         clear: both;
	    height: 50px;
	 
	    text-align: center;
	    line-height: 50px;
	    color: white;
	    cursor:pointer;
     }
     
     .mor_pic_item,.mor_video_item{
      background: rgba(0, 0, 0,0.5);
		border-radius: 5px;
		border-top: 1px solid #fff;
		padding: 1px 0 1px 0;
		border-bottom: 1px solid;
		margin-bottom: 2px;
     }
     .mor_pic_item .picTime{
	 
		 padding-left: 5px;
		 height: 30px;
         line-height: 30px;
     }
     .mor_pic_item img{
       box-shadow: 0px -1px 3px #fff,0px 1px 3px #fff;
       margin-bottom: -3px;
     }
    .mor_pic_item #picdesc {
        border-top: 1px solid #fff;
 
        margin: 0 1px 0 1px;
     }
     .mor_pic_item #picdesc:empty{
       display:none
     }
     #imgList{
           padding:5px;
     }
     .fd_tool .weui_tabbar_icon{
           width:36px;
     }
     .fd_tool a,.fd_tool .weui_tabbar_label{color:white;}
     .fd_tool  a.weui_bar_item_on {color:#09BB07}
     
     
	 a {
		color:white;
		text-decoration:none;
	}
	.level_2 a{
		 
		width: 100%;
		height: 100%;
	}
	 a:active{
		 color:#09BB07;
		 background:rgba(255,255,255,0.5);
		 border-radius:5px;
	}
	
	.ui-loader-default{
		display:none;
	}
	[class^="icon-"], [class*=" icon-"]{
		display:flex;
		text-decoration:none;
	}
 
.hd_btn {
	position: absolute;
	top: 5px;
	 
	z-index: 2;
	  width: 30px;
    height: 30px;
    text-align: center;
}

.scroll {
	overflow-y: auto;
	height: 100%
}

.swiper-container {
	width: 100%;
	background: rgba(2, 82, 84, 0.8);
	color: white;
}

.swiper-slide1 {
	text-align: center;
	font-size: 18px;
	background: #fff;
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	background: green;
}

.we_tabbar {
	 
	position: absolute;
	bottom: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 2;
 
}

.weui_tabbar_item {
	-moz-box-flex: 1;
	-webkit-box-flex: 1;
	box-flex: 1;
	display: block;
	text-align: center;
	width: 100%;
	padding: 5px 0;
	box-shadow: 1px -3px 3px rgba(0, 0, 0, 0.7);
}

.weui_tabbar_icon {
	margin: 0 auto;
	width: 36px;
	height: 36px;
}
#goback{
       width: 30px;
    height: 30px;
     z-index: 101;
}
  #pushimg{
    position:absolute;
    right:10px;
    top:10px;
    z-index:101;
    
    width: 120px;
    height: 24px;
    
    position: absolute;
    right: 30px;
    top: 24px;
    z-index: 101;
   
    color: white;
    text-align: center;
    line-height: 24px;
    border-radius: 5px;
    box-shadow: 1px 1px 0px #fff;
    border:1px solid #aaa;
    background-color:rgba(0,0,0,0.7);
    display:none;
  }
  #pushimg.disabled{
     background: #aaa;
  }
  i.delete{
  
    box-shadow: rgb(255, 255, 255,0.8) 1px 1px 0px;
	display: inline-block;
	float: right;
	font-size: 22px;
	height: 20px;
	margin-right: 3px;
	padding: 3px; 
	text-align: center;
	width: 20px;
	border:1px solid rgba(255, 255, 255,0.3);
	border-radius:3px;
	box-shadow: 1px 1px 0px rgba(0, 0, 0,0.5);
    
  }
 
  i.delete:before {
    content: "\f0b2";
  }
 
 
</style>
	 
	
	   <script type="text/javascript">
		CONETXT_PATH = '${s.base}';
	      G_PUID = '${puid!}';
		  G_TYPE ="${type!'imglist'}"; 
		  T_LONG="${tlong!}"; 
 
	      if(G_TYPE=="")G_TYPE="imglist";
   var provinceWeather={};
	</script>
</head>
<body ontouchstart  depids="${Session ["depidstr"]!}"   class="admin_${Session ["positiond"]!}"  pro="${Session ["province"]!}" >
 

 
 
 <a href="javascript:;" class="hd_btn"  id="goback">
      
       <i class="fa fa-angle-left fa-2x" ></i>   
 </a> 
 
   <a id='pushimg'  href='#'   >发送到用户组</a>
     <div class="swiper-container">
        <div class="swiper-wrapper  " style="font:normal normal normal 14px/1 FontAwesome">
             <div class="swiper-slide" id="1"><#include "./mobile/ugpage.html"></div>
              <div class="swiper-slide" id="2"><#include "./mobile/equiptlist.html"></div>
             <div class="swiper-slide" id="3"><#include "./mobile/imglist.html"></div>
      
            <div class="swiper-slide"><#include "./mobile/bigView.html"></div>   
        </div>
    </div>
    <!-- Swiper JS -->
   <!--  <script src="${s.base}/res/mobile/js/swiper.min.js"></script> -->

    <!-- Initialize Swiper -->
    <script>
/*     var swiper = new Swiper('.swiper-container',{
    	onSlideNextEnd: function(swiper){
    	     // alert('事件触发了;');
    	    }
    	},{
    		onSlidePrevEnd: function(swiper){
    		    //  alert('事件触发了;');
    		    }
    		});
	$(".swiper-container").height($(window).height());  */
	
 
	
    </script>
     
 <!-- 底部浮动工具 -->
  <a href="javascript:;" class="fd_btn">
 
     <i class="fa fa-gear fa-2x"></i>	             	          
  </a> 
  <div class="we_tabbar  fd_tool"> 
  <div style="display: flex;">
    
		        <a href="javascript:;" class="weui_tabbar_item  btn_voice    ui-link " >
		            <div class="weui_tabbar_icon">
		                <i class="fa fa-bullhorn fa-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">喊话告警</p>
		        </a>
		        <a href="javascript:;" class="weui_tabbar_item  btn_lightwarn   ui-link" >
		            <div class="weui_tabbar_icon">
		                <i class="fa fa-warning fa-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">声光告警</p>
		        </a>
		         <a href="javascript:;" class="weui_tabbar_item  btn_envdata ui-link" >
		            <div class="weui_tabbar_icon">
		                <i class="fa fa-thermometer fa-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">环境监测</p>
		        </a>
		         <a href="javascript:;" class="weui_tabbar_item  btn_weather ui-link" >
		            <div class="weui_tabbar_icon">
		                <i class="fa fa-globe fa-2x"></i>
		            </div>
		            <p class="weui_tabbar_label">天气数据</p>
		        </a>
		        
      
   </div>
   
	     <div style="display: flex;">
	    
			        <a href="javascript:;" class="weui_tabbar_item  view_pic view weui_bar_item_on" tar="${s.base}/equip/imglist/{puid}.do">
			            <div class="weui_tabbar_icon">
			                <i class="fa fa-picture-o fa-2x"></i>
			            </div>
			            <p class="weui_tabbar_label">现场图片</p>
			        </a>
			        <a href="javascript:;" class="weui_tabbar_item  view_video view" tar="${s.base}/equip/videolist/{puid}.do">
			            <div class="weui_tabbar_icon">
			                <i class="fa fa-video-camera fa-2x"></i>
			            </div>
			            <p class="weui_tabbar_label">视频短片</p>
			        </a>
			         <a href="javascript:;" class="weui_tabbar_item  btn_getPic" tar="${s.base}/getpic/{puid}.do"  >
			            <div class="weui_tabbar_icon">
			                <i class="fa fa-camera fa-2x"></i>
			            </div>
			            <p class="weui_tabbar_label">图片抓取</p>
			        </a>
			         <a href="javascript:;" class="weui_tabbar_item  btn_getVideo" tar="${s.base}/getvedio/{puid}.do"   >
			            <div class="weui_tabbar_icon">
			                <i class="fa fa-film fa-2x"></i>
			            </div>
			            <p class="weui_tabbar_label">视频抓取</p>
			        </a>
			        <a href="javascript:;" class="weui_tabbar_item weui_bar_item_on  view_status"  tar="${s.base}/equip/syscounts.do" style="display:none">
			            <div class="weui_tabbar_icon">
			                <img src="${s.base}/res/mobile/images/dev.png" alt="">
			            </div>
			            <p class="weui_tabbar_label">设备状态</p>
			        </a>
	      
	   </div>
 </div>
	
	<!-- E 可根据自己喜好引入样式风格文件 -->
	<script type="text/javascript">
	
	 

        $(function () {
        	 $("body").on("tap","#goback",function(){
        		   //货到历史网页页面
        			toPrePageWhenClick();
        			
        			return false;
        		 $(".slide-view").hide();
        	     swiper.unlockSwipes();
        		 swiper.slidePrev();
        		 $("#SVideoView")[0].pause();
        		 $("#SVideoView").hide();
        	     $("#slideView").hide();
        	     $("#pushimg").hide();
        	     
        	     $("#wform_h").hide();
        	    
        	
        	 });
   		   
        	if($("#now_equip").attr("tlong")!=""){
        		
        		getpicByTime(Number($("#now_equip").attr("tlong"))+20000);
        		//getpicByTime($("#now_equip").attr("tlong")+100);
        		 
        	}else if ($("#now_equip").attr("puid")!=""){
                        getpicByTime(""); 
        	}
        	if(G_TYPE=="videolist"){
        		//$(".weui_tabbar_item.view").removeClass("weui_bar_item_on");
        		$(".weui_tabbar_item.view_video").addClass("weui_bar_item_on").removeClass('weui_bar_item_on');
        		$("#userdep").addClass("videolist");
				$("#userdep").removeClass("imglist"); 
				$("#looktype").attr("class","icon-facetime-video");
        	}
        	function getpicByTime(timestamp2){
        		//切换到下一页
				// swiper.slideTo(2, 500, false);
        		 var puid=$("#now_equip").attr("puid");
          	   
          	  /*  var src = CONETXT_PATH + "/equip/imglist/" +puid + ".do";
  				
  			   if ($(".view_video").hasClass("weui_bar_item_on")) {
      				 src = CONETXT_PATH + "/equip/videolist/" + puid + ".do";
      			} */
  			 var src=CONETXT_PATH+"/equip/{type}/{puid}.do".format({"puid":G_PUID,"type":G_TYPE}); 
  			
  			$("#small_area").load(src, {time:timestamp2},function() {
				//切换到下一页
				// swiper.slideTo(2, 500, false);
				 lazyLoadPic(".img_content");
			}); 
  			 /*  $.ajax({
  		            type:"POST",
  		            url:src, 
  		            dataType:'html',
  		            data: "time="+timestamp2,
  		            success:function(html){
  		            	$("#small_area").html(html);
  		            },
  		            error:function(XMLHttpRequest, textStatus, thrownError){}
  		        })*/
        	}
            
           //点击确认时间
           function mobiscroll_select(timestr){
        	 //  alert(timestr)
        	   var timestamp2 = Date.parse(new Date(timestr));
        	   getpicByTime(timestamp2);
			 
           }
	 
 
 
 
        });

    </script>
    <!--BEGIN toast-->
<#include "./mobile/showTipInfo.html">
</body>
</html>